<template>
    <h4>代理服务器的启动和定义使用</h4>
    <pre class="note">
    在项目的 vue.config.js 配置文件中通过 devServer.proxy 属性的定义，完成项目开发启动时的代理功能的自动加载
        <img src="@/assets/error/36.png" alt="" srcset="">
    </pre>
    <pre>数据加载 <br> {{ users }}</pre>
    <input type="button" value="sendRequest" @click="sendRequest()">

    <h4>环境模式构建</h4>
    <pre class="note">
    webpack 通过vue提供环境监测变量 process.env.NODE_ENV 进行环境判断
        => let baseUrl = process.env.NODE_ENV==="production"?"生产环境地址":"开发环境地址";
    vite 通过vue提供环境监测变量 import.meta.env.MODE 进行环境判断
        => let baseUrl = import.meta.env.MODE==="production"?"生产环境地址":"开发环境地址";

    开发文件配置 : vue模块化项目可通过环境文件完成差异化配置
        => 项目根目录下定义如下环境模式文件
            .env    # 该文件定义在所有的环境中被载入
            .env.production   # 该文件只会在 生产环境中 装载 【npm run serve 会加载】
            .env.development  # 该文件只会在 开发环境中 装载 【npm run build 会加载】
        => .env 文件定义规则
            常量名=常量值
            常量名=常量值
            # 只有 NODE_ENV，BASE_URL 和 以 VUE_APP_ 开头的变量将被编译加载，且可以在项目中代码中使用

    项目中使用
        <img src="@/assets/error/37.png" alt="" srcset="">
    </pre>
    <input type="button" value="printModel" @click="printModel()">
</template>

<script>
import { findUserList } from "@/api/apiProxyRequest.js";
    export default {
        data() {
            return {
                users: []
            }
        },
        methods: {
            async sendRequest() {
                let result =  await findUserList()
                this.users = result.users
            },
            printModel(){
                console.log(process.env.NODE_ENV);
                console.log(process.env.BASE_URL);

            }
        },
    }
</script>

<style lang="scss" scoped>

</style>